﻿@using ViewRes

@model DataLayer.Entities.User

@section Title{
    @Shared.Profile
}

@section Pagename{
    <i class="user icon"></i>@Shared.Profile
}

@section Scripts{
    <script type="text/javascript">
        $(function () {
            $('#prefsForm').form({
                Username: {
                    identifier: 'Username',
                    rules: [
                      {
                          type: 'empty',
                          prompt: '@LoginStrings.WriteUsername'
                      }
                    ]
                },
                Email: {
                    identifier: 'Email',
                    rules: [
                      {
                          type: 'empty',
                          prompt: '@LoginStrings.WritePleaseEmail'
                      }
                    ]
                }
            }, {
                inline: true,
                on: 'blur',
                onSuccess: function () {
                    var data = $('#prefsForm :input').serialize();
                    
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "/Profile/SaveUserPrefs",
                        data: data,
                        beforeSend: function () {
                            $("#message-icon").removeClass("red").removeClass("green").removeClass("remove").removeClass("checkmark")
                            $("#message").html("");
                            $("#loader").addClass("active");
                        },
                        success: updateFields,
                        complete: function () {
                            $("#loader").removeClass("active");
                            $("input[type='password']").val("");
                        }
                    });
                }
            });
            $('#passwordForm').form({
                Password: {
                    identifier: 'Password',
                    rules: [
                      {
                          type: 'empty',
                          prompt: '@LoginStrings.WritePassword'
                      }
                    ]
                },
                ConfirmPassword: {
                    identifier: 'ConfirmPassword',
                    rules: [
                      {
                          type: 'match[Password]',
                          prompt: '@LoginStrings.PasswordNotMatch'
                      }
                    ]
                }
            }, {
                inline: true,
                on: 'blur',
                onSuccess: function () {
                    var password = $("#password").val();

                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "/Profile/ResetPassword",
                        data: "password=" + password,
                        beforeSend: function () {
                            $("#message-icon").removeClass("red").removeClass("green").removeClass("remove").removeClass("checkmark")
                            $("#message").html("");
                            $("#loader").addClass("active");
                        },
                        success: updateFields,
                        complete: function () {
                            $("#loader").removeClass("active");
                            $("input[type='password']").val("");
                        }
                    });
                }
            });
        });

        function updateFields(data) {
            if (data.Success) {
                $("#message-icon").addClass("green").addClass("checkmark");
            } else {
                $("#message-icon").addClass("red").addClass("remove");
            }
            $("#message").html(data.Message);
            $('#dimmerContent').dimmer('show');
        }
    </script>
}
<div class="ui grid">
    <div class="row">
        <div class="column">
            <h3 class="ui header">@ViewRes.Profile.ChangeUserDetails</h3>
            <div class="ui form" id="prefsForm">
                <div class="field">
                    <label>@ViewRes.Profile.Username</label>
                    <input type="text" name="Username" id="username" value="@Model.Username" />
                </div>
                <div class="field">
                    <label>@ViewRes.Profile.Email</label>
                    <input type="text" name="Email" value="@Model.Email" />
                </div>
                <div class="ui blue submit button">@Shared.Save</div>
            </div>
        <div class="ui clearing divider"></div>
    </div>
</div>
<div class="row">
    <div class="column">
        <h3 class="ui header">@ViewRes.Profile.ChangePassword</h3>
        <div class="ui form" id="passwordForm">
            <div class="two fields">
                <div class="field">
                    <label>@ViewRes.Profile.Password</label>
                    <input type="password" name="Password" id="password" value="" />
                </div>
                <div class="field">
                    <label>@ViewRes.Profile.ConfirmPass</label>
                    <input type="password" name="ConfirmPassword" value="" />
                </div>
            </div>
            <div class="ui blue submit button">@Shared.Save</div>
        </div>
    </div>
</div>
</div>

<!-- Message Dimmer -->
<div class="ui page dimmer" id="dimmerContent">
    <div class="content">
        <div class="center">
            <h2 class="ui inverted icon header">
                <i id="message-icon" class="icon circular inverted emphasized"></i>
                <span id="message"></span>
            </h2>
        </div>
    </div>
</div>

<!-- Loader -->
<div id="loader" class="ui page dimmer">
    <div class="ui large text loader">@Shared.Loading</div>
</div>
